<template>
  <view class="container">
    <view class="main">
      <view class="amountInfo">
        <view class="amountInfo-title">
          <text style="color: red;">*</text>快递单号
        </view>
        <input class="autn-item-ipt" maxlength="11" v-model="formLine.refund_express" placeholder-class="styles"
          type="text" placeholder="请输入" />
      </view>
      <view class="amountInfo">
        <view class="amountInfo-title">
          <text style="color: red;">*</text>联系方式
        </view>
        <input class="autn-item-ipt" maxlength="11" v-model="formLine.refund_phone" placeholder-class="styles"
          type="number" placeholder="请输入" />
      </view>
      <view class="amountInfo">
        <view class="amountInfo-title">
          <text style="color: red;">*</text>快递公司
        </view>
        <view class="autn-item-ipt" style="display: flex;align-items: center;justify-content: space-between;"
          @click="open">
          <text style="color: #999;" :class="formLine.refund_express_name?'addressActiveTxt':''">{{formLine.refund_express_name?formLine.refund_express_name:'请选择'}}</text>
          <image style="width: 48rpx;height: 48rpx;" src="/static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="amountInfo">
        <view class="amountInfo-title" style="margin-bottom: 15rpx;">
          <text style="color: red;">*</text>图片({{formLine.images.length}}/9)
        </view>
        <view class="imgs">
          <UploadImgs keyName="images" :uploadImg="formLine.images" @getUrl="getUrls" />
        </view>
      </view>
      <view class="amountInfo">
        <view class="amountInfo-title">
          <text style="color: red;">*</text>备注
        </view>
        <textarea class="autn-item-ipt" style="height: 280rpx;padding: 30rpx;box-sizing: border-box;"
          v-model="formLine.refund_explain" placeholder-class="styles" type="text" placeholder="请输入" />
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="onSave">提交</view>
    </view>
    <uv-picker ref="picker" :columns="column" keyName="name" @confirm="confirm"></uv-picker>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        formLine: {
          id: "", //售后id
          refund_express: "", //快递单号
          refund_phone: "",
          refund_express_name: "", //快递公司
          refund_express_code: "", //快递公司编号
          refund_img: "",
          images: [],
          refund_explain: ""
        },
        column: []
      }
    },
    onLoad(option) {
      this.formLine.id = option.id;
      this.getList();
    },
    methods: {
      open() {
        this.$refs.picker.open();
      },
      confirm(e) {
        console.log('选择公司', e);
        this.formLine.refund_express_name = e.value[0].name;
        this.formLine.refund_express_code = e.value[0].code;
      },
      getList() {
        reqApi.logisticList({}).then(res => {
          console.log("物流公司", res);
          this.column = [
            [...res.data]
          ];
        })
      },
      async onSave() {
        if (!this.formLine.refund_express) {
          uni.showToast({
            title: "快递编号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.refund_phone) {
          uni.showToast({
            title: "联系方式不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!tools.checkPhone(this.formLine.refund_phone)) {
          uni.showToast({
            title: "联系方式格式错误",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.refund_express_name) {
          uni.showToast({
            title: "请选择快递公司",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (this.formLine.images.length == 0) {
          uni.showToast({
            title: "请上传图片",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        this.formLine.refund_img = this.formLine.images.join(",");
        console.log("formLine", this.formLine);
        await reqApi.expressInfo(this.formLine);
        uni.showToast({
          title: "填写成功",
          icon: 'none',
          mask: true,
          duration: 1500,
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      },
      getUrls(e) {
        console.log("子组件传过来的图片", e);
        const {
          keyName,
          arr
        } = e;
        this.formLine[keyName] = arr;
        console.log("formLine", this.formLine);
      },
      getUrl(e) {
        const {
          keyName,
          value
        } = e;
        this.formLine[keyName] = value;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .addressActiveTxt {
    color: #222 !important;
  }

  .addressTxt {
    width: 100%;
    height: 96rpx;
    background: #F7F8FA;
    border-radius: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #AAAAAA;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    position: relative;

    .arrowIcon {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      right: 30rpx;
      top: 30rpx;
    }
  }

  .container {
    width: 100vw;
    height: calc( 100vh - 88rpx );
    background: #fff;

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      .amountInfo {
        margin-bottom: 30rpx;

        .amountInfo-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #232323;
        }

        .autn-item-ipt {
          width: 100%;
          height: 96rpx;
          background: #F7F8FA;
          border-radius: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222;
          padding: 0 30rpx;
          box-sizing: border-box;
          margin-top: 16rpx;
        }

        .styles {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #AAAAAA;
        }
      }

    }

    .footer {
      position: fixed;
      padding: 50rpx 70rpx;
      box-sizing: border-box;
      width: 100%;
      bottom: 0;

      .btn {
        width: 100%;
        height: 96rpx;
        background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
        border-radius: 92rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 96rpx;
      }
    }
  }
</style>